<template>
  <div class="strategy-detail" v-loading="loading">
    <div class="">
      <el-container class="detail-container-with">
        <div class="detail-container">
          <div class="detail-title">攻略详情</div>
          <div class="detail-title2">TRAVEL GUIDE DETAILS</div>
          <el-card style="margin-top: -15px;">
            <div class="detail-content-container">
              <div class="goods-info clearfix">
                <div class="gallery-list">
                  <e-xiangqingxinxi :images="map.photo"></e-xiangqingxinxi>
                </div>
                <div class="goods-right-content">
                  <!--                                    <div>-->
                  <h3 class="content-title">
                    <span class="content-strategyName">{{ map.strategyName }}</span>
                    <e-favorite v-model="isFavorite" module="strategy" column="strategyName" :id="map.id"></e-favorite>
                  </h3>
                  <!--                                    </div>-->
                  <div class="content-details">
                    <div class="detail-item">
                      <i class="el-icon-location detail-icon"></i>
                      <span class="detail-label">城市：</span>
                      <span class="detail-value">{{ map.city }} </span>
                    </div>
                    <div class="detail-item">
                      <i class="el-icon-time detail-icon"></i>
                      <span class="detail-label">时间：</span>
                      <span class="detail-value">{{ map.month }} </span>
                    </div>
                    <div class="detail-item">
                      <span class="detail-label">天数：</span>
                      <span class="detail-value">{{ map.days }} </span>
                    </div>
                    <div class="detail-item">
                      <span class="detail-label">价格：</span>
                      <span class="detail-value">{{ map.price }} </span>
                    </div>
                    <div class="detail-item">
                      <!--                                          <i class="el-icon-view detail-icon"></i>-->
                      <span class="detail-value">浏览量：</span>
                      <span class="detail-value">{{ map.clicks }} </span>
                      <div class="yuding-buttom">
                        <el-button class="detail-button" type="primary" @click="$router.push('/strategybookingadd?id=' + map.id)">预定</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <e-container>
                  <div style="margin:15px 0 15px 0;background-color:#FFFFFF">
                    <e-container>
                      <el-tabs type="border-card">
                        <el-tab-pane label="线路特色">
                          <div style="margin:15px 0 15px 0;background-color:#FFFFFF">
                            <div style="text-indent: 2em">
                              <div v-html="map.feature"></div>
                            </div>

                          </div>
                        </el-tab-pane>
                        <el-tab-pane label="线路简介">
                          <div style="margin:15px 0 15px 0;background-color:#FFFFFF">

                            <div style="text-indent: 2em">
                              <div v-html="map.introduction"></div>
                            </div>

                          </div>
                        </el-tab-pane>
                      </el-tabs>
                    </e-container>

                  </div>

                </e-container>
              </div>
            </div>

          </el-card>

        </div>

      </el-container>
    </div>

  </div>
</template>

<style type="text/scss" scoped lang="scss">
.yuding-buttom {
  width: 60%;
  padding-left: 75%;
}

.strategy-detail {
  width: 100%;
  padding-left: 5%;
}

.detail-content-container {
  position: relative;
  line-height: 1.8;
  letter-spacing: 0.1em;
  margin-top: 30px;

  ::v-deep img {
    width: 100%;
    height: 100%;
  }

}

.detail-container-with {
  margin-left: 100px;
  margin-right: 100px;
}

.content-title {
  font-size: 28px;
  font-weight: 600;
  color: #333333;
  display: flex;
  align-items: center;
  margin-bottom: -10px;
  margin-top: -10px;

  .content-strategyName {
    margin-left: 34px;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
  }
}

.content-details {
  font-family: 'Arial, sans-serif';
  margin: 0px 20px;

  .detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    padding: 8px 15px;
    .detail-icon {
      font-size: 20px;
      margin-right: 10px;
      color: #81b3c7;
    }

    .detail-label {
      font-size: 16px;
      font-weight: 500;
      color: #666666;
    }

    .detail-value {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }

    .detail-value1 {
      font-size: 18px;
      font-weight: 400;
      color: #f87a7a;
    }
  }
}

::v-deep button {
  -webkit-appearance: button;
  background-color: #7fabbe;
  border-color: #7fabbe;
}

::v-deep button:hover {
  background-color: #b3cdd8;
  border-color: #b3cdd8;
}

::v-deep button:active {
  background-color: #7fabbe;
  border-color: #7fabbe;
}

::v-deep button:focus {
  background-color: #7fabbe;
  border-color: #7fabbe;
}

.goods-info {
  display: flex;
  align-items: center;

  //justify-content: space-between;
  .gallery-list {
    flex-shrink: 0;
    margin-left: 5%;
    margin-right: -10px;
    width: 499px;
    margin-bottom: 25px;
    z-index: 1;

    ::v-deep .el-carousel__container {
      position: relative;
      height: 335px;
    }
  }

  .goods-right-content {
    background-color: white;
    padding: 10px;
    box-shadow: 7px 6px 10px rgba(0, 0, 0, 0.1);
    margin-left: -62px;
    height: 335px;
    width: 80%;
    margin-top: -16px;
    z-index: 2;

    .custom-hr {
      margin-top: -20px;
      margin-bottom: -24px;
      border: 0;
      border-top: 1px solid #b1aaaa;
      width: 100%;
    }

    ::v-deep .el-button.is-circle {
      background: #81b3c7;
      border: 1px solid #81b3c7;
      margin-left: 15px;
    }

  }
}

.goods-content {
  margin-top: 15px;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-family: 'Arial, sans-serif';
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  text-indent: 2em;
  /* 首行缩进两个字符 */
}

.detail-title {
  text-align: center;
  font-size: 25px;
  width: 100%;
}

.detail-title2 {
  margin-bottom: 3%;
  color: #8c8c8c;
  text-align: center;
  font-size: 17px;
  width: 100%;
}

.detail-container {
  width: 100%;
  margin: 10px 0px 0px;
  background-color: rgb(255, 255, 255);
}

::v-deep .el-tabs--border-card {
  width: 103%;
  margin-top: -2%;
  background: #FFFFFF;
  border: 1px solid #DCDFE6;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
::v-deep p {
  font-size: 18px;
  font-family: cursive;
  margin: 30px 0 10px;
}
</style>

<script>
import api from '@/api';
import { extend } from '@/utils/extend';
export default {
  data() {
    return {
      loading: false,   // 加载
      isFavorite: false, // 是否已经收藏
      map: {
        number: '',
        strategyName: '',
        photo: '',
        city: '',
        month: '',
        days: '',
        price: '',
        clicks: '',
        feature: '',
        introduction: '',
        addtime: '',
      },
    }
  },
  props: {
    id: {
      type: [String, Number],
      required: true
    }
  },
  watch: {
    id: {
      handler() {
        this.loadDetail();
      },
      immediate: true
    },
  },
  computed: {
  },
  methods: {
    loadDetail() {
      if (this.loading) return;
      this.loading = true;
      this.$get(api.strategy.webdetail, {
        id: this.id
      }).then(res => {
        this.loading = false;
        if (res.code == api.code.OK) {
          extend(this, res.data);
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        this.loading = false;
        this.$message.error(err.message);
      });
    },

  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>